<template>
  <div class="app-container">
    <HmiBatchUpdate
      :show-setting-zone="showSettingZone"
      :page-size="20"
      @save-success="handleSaveSuccess"
      @save-error="handleSaveError"
    />
  </div>
</template>

<script setup lang="ts">
// import { computed, onMounted } from "vue";
import { useRoute } from "vue-router";
// import { ElMessage } from "element-plus";
import { useHmiConfigStore, useSettingZoneStore } from "@/store";
import HmiBatchUpdate from "@/components/HmiBatchUpdate/index.vue";

defineOptions({
  name: "HmiBatchUpdate",
  inheritAttrs: false,
});

// Store
const route = useRoute();
const hmiConfigStore = useHmiConfigStore();
const settingZoneStore = useSettingZoneStore();

// 计算是否显示定值区
const showSettingZone = computed(() => {
  // const apiPath = (route?.meta?.params as any)?.api || "";
  // const tableRule = hmiConfigStore.getTableHeaderRuleByUri(apiPath);
  const tableRule = hmiConfigStore.getTableHeaderRuleByPath(route.path);
  return tableRule?.showRule?.batchUpdateOptions?.showSettingZone || false;
});

const settingZoneApi = computed(() => {
  // const apiPath = (route?.meta?.params as any)?.api || "";
  // const tableRule = hmiConfigStore.getTableHeaderRuleByUri(apiPath);
  const tableRule = hmiConfigStore.getTableHeaderRuleByPath(route.path);
  return tableRule?.showRule?.batchUpdateOptions?.settingZoneApi || "";
});

// 事件处理
function handleSaveSuccess(data: any) {
  // ElMessage.success(`成功保存 ${data.length} 条记录`);
  console.log("保存成功:", data);
}

function handleSaveError(error: Error) {
  // ElMessage.error(`保存失败: ${error.message}`);
  console.error("保存失败:", error);
}

// 初始化
onMounted(async () => {
  try {
    await hmiConfigStore.initHmiConfig();
    if (showSettingZone.value) {
      await settingZoneStore.fetchSettingZoneInfo(settingZoneApi.value);
    }
  } catch (error) {
    console.error("初始化失败:", error);
    ElMessage.error("初始化配置失败");
  }
});
</script>

<style scoped>
.app-container {
  padding: 20px;
  height: 100%;
}
</style>
